<!-- 设备列表 1: 性诱测报列表  2 虫情监测列表  3 监控设备列表  4 小气候设备列表  -->

<template>
<view class="page">
	<template v-if="token&&isLogin">		 
		<view class="h45 m-b2">
			<view class="fix-wrap">	 
				<view class="search-ctrl">						
					<view class="search-bar">
						<view class="iconfont f-s34">&#xe663;</view>
						<input type="text" confirm-type="search" v-model="params.keywork" class="sc-inp" placeholder="输入设备地址/设备编号" @confirm="searchScan">
					</view>
				</view>					 
			</view>
		</view>
		<view class="body"> 
			<template v-if="!loadingState.default">
				<template v-if="list.data.length>0">				
					<view class="list-wrap"> 
						<view class="tool-item" v-for="(item,index) in list.data" :key="index">
							<navigator :url="'/package_common/detail/detail?number='+item.number" hover-class="none" class="info-wrap">
								<view class="pic">
									<image v-if="item.file_path" :src="img_path+item.file_path+'&type=1'" mode="widthFix"></image>
									<image v-else src="@/static/images/img_empty.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="name">{{item.NAME||item.device_name||item.cameraName||item.name}}</view> 
									<view class="text number">安装时间：{{item.addtime}}</view> 
									<view class="text address">
										<view class="label">安装地址：</view>
										<view class="content split-line">{{item.address||'不详'}}</view> 										
									</view>
								</view>
							</navigator>								 
						</view>
					</view>
					<loading :loadingState="loadingState"></loading>
				</template>
				<empty v-else><view slot="msg">暂无相关设备</view></empty>
			</template>
			<template v-else>
				<loading :loadingState="loadingState"></loading>
			</template>
			
		</view> 
	</template>
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue' 
export default {
	name:'name',
	data(){
		return {
			token:uni.getStorageSync('token'),
			appid:getApp().globalData.appid,
			userInfo:uni.getStorageSync('userInfo'),
			isLogin:false, 
			loginStateUpdate:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			params:{
				limit:10,
				page:1,
				keywork:'', 
			}, 
			list:{
				total:0,
				data:[]
			},
			img_path:getApp().globalData.image_path 
		}
	},
	async onLoad(params) { 		
		if(this.token){
			this.isLogin=await this.$loginState('check');			  
			if(this.isLogin){
				this.getAnZhuangDevice(); 
			}else{
				this.isLogin=await this.$loginState('reset');
			}
		} 
		 
	},
	async onShow() {   
		// 登录状态更新 重新获取token 等值
		if(this.loginStateUpdate){
			this.token=uni.getStorageSync('token');
			this.userInfo=uni.getStorageSync('userInfo'); 
			this.isLogin=true;
			this.getAnZhuangDevice(); 
			this.loginStateUpdate=false;
		}
		
		if(!this.token&&!this.isLogin){
			this.isLogin=await this.$loginState('reset'); 
		}
		
		
				
	},
	onReachBottom() { 
		if(this.loadingState.completed){
			this.params.page=0;
			return false
		}else{ 
			this.params.page++;
			this.getAnZhuangDevice();
		}		
	},
	methods:{	
		
		dataInit:function(){
			this.list.data=[];
			this.params.page=1;
			this.params.key='';
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
		},
		
		// 获取设备类型
		getAnZhuangDevice:async function(){  			
			let res=await this.$api.tool_api.yazDevice({
				appid:this.appid,
				token:this.token,
				user_id:this.userInfo.uid,
				page:this.params.page,
				limit:this.params.limit,
				keywork:this.params.keywork
			})  
			if(res.data.ret==1000){
				this.list.data=this.list.data.concat(res.data.data); 
				if(res.data.data.length<this.params.limit){ 
					this.loadingState.default=false;
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}else{ 
					this.loadingState.default=false;
					this.loadingState.loading=true;
				}				
			}else if(res.data.ret==1002){
				this.loadingState.default=false;
				this.loadingState.loading=false;
				this.loadingState.completed=true;
			} 	
		},
 
		
		
		searchScan:function(e){ 
			this.dataInit();
			this.getAnZhuangDevice();			
		},
 
		 
	},
	components:{ 
		loading,
		empty
	},
	computed:{
		 
	},
	watch:{
		 
	}
	
}
</script>

<style lang="less"> 	 
	.list-wrap{ 
	}
	.tool-item{
		padding:20rpx;
		margin-bottom: 20rpx;
		background: #fff;
		.info-wrap{
			display: flex;
			margin-bottom: 20rpx;
			.pic{
				display: flex;
				align-items: center;
				justify-content: center;
				width:20%;
				height:150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				overflow: hidden;
				flex-shrink: 0;
				image{
					border-radius: 10rpx;
				}
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				.number{
					margin-bottom: 10rpx;
					color:#666;
					font-size: 26rpx;
				}
				.address{
					display: flex;
					flex-wrap: wrap;
					.label{
						flex-shrink: 0;
					}
					.content{
						max-width: 75%;
						flex-grow: 2;
					}
					color:#666;
					font-size: 26rpx;
				}
			}
		}		 
	}
	.empty-wrap{
		margin-top: 30rpx;
	}
</style>
